<!--
 * @Author: libing 9852442+liu-sheng-8667@user.noreply.gitee.com
 * @Date: 2024-04-11 22:08:47
 * @LastEditors: xuezhuangzhuang xzz6996@qq.com
 * @LastEditTime: 2025-01-13 20:56:15
 * @FilePath: \crm\pages\customer\conponents\company-item.vue
 * @Description: 公司信息--客户类型
-->
<template>
  <view class="company-item" @click="toPage">
    <!-- 企业 -->
    <view class="company">
      <view class="company-wrap">
        <view
          :class="[
            'company-title',
            item.useAmount !== null ? 'overdue-customers' : '',
          ]"
          >{{ item.name }}
        </view>
        <view class="company-follow">创建时间 {{ item.createTime }}</view>
      </view>
      <view class="company-status">
        <u--image
          :src="$z.imgsrc('company-status.png')"
          width="171rpx"
          height="32rpx"
        ></u--image>
        <div class="a">
          {{ item.status == 0 ? "正常" : item.status == -1 ? "禁用" : "" }}
        </div>
      </view>
    </view>
    <!-- 客户类型 -->
    <view :class="['customer-type', isActive ? 'active' : '']">
      <view class="type-wrap">
        <view class="type-item">
          <view class="type-label">客户类型</view>
          <view class="type-value">{{
            customerTypesObj[item.customTypeId] || "暂无"
          }}</view>
        </view>
        <view class="type-item">
          <view class="type-label">手机号码</view>
          <view class="type-value">{{ item.phone }}</view>
        </view>
      </view>
      <!-- 创建时间 -->
      <view class="customer-type-time"
        >地址：{{ item.province + item.city + item.region }}</view
      >
    </view>


  </view>
</template>
<script>
import { getCustomerType } from "@/config/storage";

export default {
  name: "company-item",
  props: {
    isActive: {
      type: Boolean,
      default: false,
    },
    item: {
      type: Object,
      default: () => ({}),
    },
    customerTypesObj: {
      type: Object,
      default: () => {
        const customTypeList = getCustomerType() || [];
        let obj = {};
        customTypeList.forEach((item) => {
          obj[item.id] = item.name;
        });
        return obj;
      },
    },
  },
  methods: {
    // 跳转详情页面
    toPage() {
      this.$emit("jump");
    },

  },
};
</script>
<style lang="scss" scoped>
.company-item {
  padding: 0 18rpx;
}
.sihai {
  position: absolute;
  right: 10px;
  top: 10px;
}
.company {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30rpx;
  padding: 0 26rpx;
  .company-title {
    font-weight: 500;
    font-size: 32rpx;
    color: #171a1d;
    line-height: 45rpx;
    margin-bottom: 10rpx;
  }
  .company-follow {
    font-size: 24rpx;
    color: #838589;
    line-height: 33rpx;
  }
  .company-status {
    width: 171rpx;
    .a {
      background: #e3e3ef;
      font-weight: 400;
      font-size: 24rpx;
      color: #015ad4;
      line-height: 34rpx;
      min-width: 96rpx;
      width: 112rpx;
      height: 36rpx;
      text-align: center;
      margin-top: 7px;
    }
  }
}
.customer-type {
  height: 187rpx;
  background: rgba(220, 38, 38, 0.05);
  border-radius: 16rpx;
  border: 1rpx solid rgba(220, 38, 38, 0.2);
  padding: 20rpx 24rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .type-wrap {
    display: flex;
    justify-content: space-between;
    border-bottom: 1rpx solid rgba(220, 38, 38, 0.2);
    padding-bottom: 16rpx;
  }
  .type-item {
    width: 50%;
    .type-label {
      font-size: 24rpx;
      color: #838589;
      line-height: 33rpx;
      margin-bottom: 8rpx;
    }
    .type-value {
      font-size: 28rpx;
      color: #171a1d;
      line-height: 40rpx;
    }
  }
  .customer-type-time {
    font-size: 24rpx;
    color: #838589;
    line-height: 33rpx;
  }
  &.active {
    background: #f4f6fa;
    border: 1rpx solid #f4f6fa;
    .type-wrap {
      border-bottom: 1rpx solid #e9ebec;
    }
  }
}
</style>
